<!DOCTYPE HTML>
<html>
	<head>
	
		<title>SEB Plataforma Educacional</title>
        
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		
		<!-- Files for the SpiffyUI framework -->
        <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="touchslider.js"></script>
        <link type="text/css" rel="stylesheet" href="touchslider.css" />
        <script type="text/javascript">
        var video = document.getElementById('video');
		video.addEventListener('click',function(){
		  video.play();
		},false);
        </script>
	</head>

	<body>
		<div id="slidecont" style="background-color:#CC9900;">
            <div id="slidebar"  style="background-color:#000000;">

                <div class="cell" id="maintitle"  style="background-color:#FF00FF;">
                    <h1>SEB Plataforma Educacional</h1>
                    <video id="video" width="320" height="240" controls poster="http://www.html5rocks.com/en/tutorials/video/basics/star.png" >
                        <source src="videos/teste.mp4" codecs="avc1.42E01E, mp4a.40.2"' />
                        Your browser does not support the video tag.
                    </video>
                </div>
                <div class="cell">
                    <p><a href="slideme/index.html"></a></p>
                </div>
                <div class="cell">
                    <p>
                        Implementando Recurso para Tablet.</p>
                </div>
                <div class="cell">
                    <p>Video</p>
                </div>
                 <div class="cell">
                    <p>
                        Use os dedos para ir para a direita ou esquerda.</p>
                </div>
                
                <div class="cell" style="background-color:#0000FF;">
                    <p>
                        Funciona em todos os tablets com JavaScript habilitado.</p>
                </div>
                
                <div class="cell" id="iphone"> </div>
                
                <div class="cell" id="ipad"> </div>
                
                <div class="cell" id="maintitle">
                    <h1 style="margin-top: 50px;">e</h1>
                </div>
                
                <div class="cell" id="android"> </div>
                
                <div class="cell">
                    <h1>Funciona com imagens</h1>
                </div>
                <div class="cell">
                   <img src="images/menu-biologia.jpg" width="683" height="400">
                </div>
                <div class="cell">
                   <img src="images/menu-fisica.jpg" width="683" height="400">
                </div>
                <div class="cell">
                   <img src="images/menu-historia.jpg" width="683" height="400">
                </div>
                <div class="cell">
                   <img src="images/menu-matematica.jpg" width="683" height="400">
                </div>
                <div class="cell">
                   <img src="images/menu-quimica.jpg" width="683" height="400">
                </div>
                <div class="cell">
                   <img src="images/menu-biologia.jpg" width="683" height="400">
                </div>
                <div class="cell" id="snail"> </div>
                <div class="cell" id="habenaro"> </div>
                <div class="cell" id="stones"> </div>
                
                <div class="cell">
                    <p>
                        Em cada página vc pode colocar o que quiser!</p>
                </div>
                
                <div class="cell" id="gmail"> </div>
                <div class="cell" id="youtube"> </div>
                <div class="cell" id="ebay"> </div>
                
                <div class="cell">
                    <p>
                    Aplicação de forma nativa</p>
                </div>
                
                <div class="cell">
                    <p>
                        Suporta vários recursos</p>
                </div>
                
                <div class="cell">
                    <p>
                    Tente carregar o dedo mais rápido e a páginas deslizaram.</p>
                </div>
                
                <div class="cell" id="cupcake"> </div>
                <div class="cell" id="cans"> </div>
                <div class="cell" id="tomato"> </div>
                <div class="cell" id="rabbit"> </div>
                <div class="cell" id="gerbera"> </div>
                <div class="cell" id="zebra"> </div>
                
                <div class="cell">
                    <h1>Quem saber como isso Funciona?</h1>
                </div>
                
                <div class="cell">
                    Fale com o Pessoal do BRe - Desenvolvendo Tecnológia para Educação
                </div>
                
            </div>
        </div>
        
		<div style="display: none; margin-top: 50px;">
			<h3>Out:</h3>
			<div id="output"></div>
		</div>
	</body>
</html>
